<template>
  <div>
    <div class="Centerofconcern_die" :style="windowHeight">
      <div>
        <div @click="tabVal(0)" :class="tab==0?'div':''">我关注的</div>
        <span>|</span>
        <div @click="tabVal(1)" :class="tab==1?'div':''">关注我的</div>
      </div>
      <div>
        <div v-show="tab==0">
          <div class="non_div" v-if="!myguanzhuisshow">您还没有关注别人！</div>
          <div v-for="(item,index) in myGuanzhu" :key="index" v-if="myguanzhuisshow" @click="navto(item,0)">
            <div>
              <img :src="item.info_avatar" alt  />
              <span>{{item.info_nick}}</span>
              <img src="https://www.zhaoshengku.net/v.png" alt v-if="item.info_type==4" />
            </div>
            <div v-show="item.isall==0" @click="deleguan(item.follow_with_member_id,index)">已关注</div>
            <div v-show="item.isall==1" class="huguan_div">已互关</div>
          </div>
        </div>
        <div v-show="tab==1">
          <div class="non_div" v-if="!youguanzhuisshow">暂时没有人关注您！</div>
          <div v-for="(item,index) in guanZhumy" :key="index" v-if="youguanzhuisshow" @click="navto(item,1)">
            <div>
              <img :src="item.info_avatar" alt  />
              <span>{{item.info_nick}}</span>
              <img src="https://www.zhaoshengku.net/v.png" alt v-if="item.info_type==4" />
            </div>
            <div v-show="item.isall==0" @click="guanzhuTabVal(item,1)">关注</div>
            <div v-show="item.isall==1">已互关</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab: 0,
      windowHeight: "",
      guanzhuTab: 0,
      headerCode: "",
      myGuanzhu: [],
      guanZhumy: [],
      myguanzhuisshow: true,
      youguanzhuisshow: true
    };
  },
  methods: {
    tabVal(e) {
      this.tab = e;
    },
    guanzhuTabVal(item) {
      console.log("1");
      console.log(item)
      wx.request({
        url: "https://api.zhaoshengku.net/index/member/foolow",
        header: {
          Authorization: this.headerCode
        },
        method: "post",
        data: {
          id: item.follow_member_id
        },
        success: res => {
          if (res.data.code == 200) {
            wx.showToast({
              title: "关注成功",
              icon: "true",
              duration: 1500
            });
            item.isall = 1;
          }
        }
      });
    },
    deleguan(id, ind) {
      wx.request({
        url: "https://api.zhaoshengku.net/index/member/foolow",
        method: "post",
        data: {
          id: id
        },
        header: {
          Authorization: this.headerCode
        },
        success: res => {
          if (res.data.code == 200) {
            wx.showToast({
              title: "取消关注成功",
              icon: "true",
              duration: 1000,
              mask: true
            });
            this.myGuanzhu.splice(ind, 1);
            this.onShows();
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    onShows() {
      //  验证token
      wx.showToast({
        title: "",
        icon: "loading"
      });
      wx.getStorage({
        key: "koken",
        success: res => {
          this.headerCode = "Bearer " + res.data;
          // 被关注的
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/getwithfoolowlist",
            method: "post",
            data: {
              pagenum: 1,
              pagesize: 10
            },
            header: {
              Authorization: this.headerCode
            },
            success: res => {
              console.log(res);
              if (res.data.code == 200) {
                if (res.data.data.data.length == 0) {
                  this.youguanzhuisshow = false;
                } else {
                  this.guanZhumy = res.data.data.data;
                  this.youguanzhuisshow = true;
                }
              }
            },
            fail: res => {
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
          //我i关注的
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/getfoolowlist",
            method: "post",
            data: {
              pagenum: 1,
              pagesize: 10
            },
            header: {
              Authorization: this.headerCode
            },
            success: res => {
              console.log(res);
              if (res.data.code == 200) {
                wx.stopPullDownRefresh();
                wx.hideToast();
                if (res.data.data.data.length == 0) {
                  this.myguanzhuisshow = false;
                } else {
                  this.myGuanzhu = res.data.data.data;
                  this.myguanzhuisshow = true;
                }
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        },
        fail: res => {
          wx.showToast({
            title: "未登录！",
            icon: "none",
            duration: 2500
          });
          setTimeout(function() {
            wx.navigateTo({
              url: "/pages/loginRegister/main"
            });
          }, 1000);
        }
      });
    },
    navto(e, i) {
      let id;
      var url;
      if (e.info_type == 4) {
        url = "myhomeEducat";
      } else if (e.info_type == 5) {
        url = "myhome";
      } else if (e.info_type == 6) {
        return;
      }
      if (i == 1) {
        id = e.follow_member_id;
      } else if (i == 0) {
        id = e.follow_with_member_id;
      }
      if (id) {
        wx.request({
          url: "https://api.zhaoshengku.net/api/data/getinfo",
          header: {
            Authorization: this.headerCode
          },
          method: "post",
          data: {
            id: id
          },
          success: res => {
            if (res.data.code == 200) {
              wx.navigateTo({
                url:
                  "/pages/" +
                  url +
                  "/main?id=" +
                   id +
                  "&expor=0&name="+res.data.data.info_subdomain
              });
              console.log(res.data.data.info_subdomain)
            }
          }
        });
      }
    }
  },
  mounted() {
    wx.getSystemInfo({
      success: res => {
        this.windowHeight = "height:" + res.windowHeight * 2 + "rpx";
      }
    });
    // 设置头
    wx.setNavigationBarTitle({
      title: "关注中心"
    });
  },
  onShow() {
    this.onShows();
  },
  onPullDownRefresh() {
    this.onShows();
  }
};
</script>

<style scoped>
.non_div {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #666;
  font-size: 26rpx;
}
.Centerofconcern_die {
  background: #fff;
  padding-top: 10rpx;
}
.Centerofconcern_die > div:nth-child(1) {
  padding: 0 31rpx;
  height: 91rpx;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 20rpx;
}
.Centerofconcern_die > div:nth-child(1) > span {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
.Centerofconcern_die > div:nth-child(1) > div {
  width: 346rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
.Centerofconcern_die > div:nth-child(1) > .div {
  border-bottom: 1rpx solid #2297d4;
  color: #2297d4;
}
.Centerofconcern_die > div:nth-child(2) > div {
  padding: 0 10rpx;
}
.Centerofconcern_die > div:nth-child(2) > div > div {
  width: 100%;
  height: 137rpx;
  padding-left: 21rpx;
  padding-right: 31rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0px 0px 8px 0px rgba(102, 102, 102, 0.35);
  border-radius: 10px;
  background: #fff;
  position: relative;
  margin-bottom: 10rpx;
}
.Centerofconcern_die > div:nth-child(2) > div > div > div:nth-child(1) {
  display: flex;
  align-items: center;
}
.Centerofconcern_die
  > div:nth-child(2)
  > div
  > div
  > div:nth-child(1)
  > img:nth-child(1) {
  width: 102rpx;
  height: 102rpx;
  border-radius: 50%;
  margin-right: 35rpx;
}
.Centerofconcern_die
  > div:nth-child(2)
  > div
  > div
  > div:nth-child(1)
  > span:nth-child(2) {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.Centerofconcern_die
  > div:nth-child(2)
  > div
  > div
  > div:nth-child(1)
  > img:nth-child(3) {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  left: 88rpx;
  top: 88rpx;
}
.Centerofconcern_die > div:nth-child(2) > div > div > div:nth-child(2) {
  border: 1rpx solid rgba(153, 153, 153, 1);
  border-radius: 24px;
  width: 140rpx;
  height: 48rpx;
  line-height: 40rpx;
  background: url("http://www.zhaoshengku.net/wx-%E5%AF%B9%E5%8F%B7.png")
    no-repeat;
  background-size: 26rpx 18rpx;
  font-size: 24rpx;
  background-position: 15rpx 12rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  padding-left: 48rpx;
  box-sizing: border-box;
}
.Centerofconcern_die
  > div:nth-child(2)
  > div:nth-child(2)
  > div
  > div:nth-child(2) {
  background: url("http://www.zhaoshengku.net/wx-jia.png") no-repeat;
  background-size: 19rpx 19rpx;
  background-position: 28rpx 12rpx;
  padding-left: 58rpx;
}
.Centerofconcern_die
  > div:nth-child(2)
  > div:nth-child(2)
  > div
  > div:nth-child(3),.huguan_div {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  width: 140rpx;
  height: 48rpx;
  padding-left: 48rpx;
  box-sizing: border-box;
  background: url("http://www.zhaoshengku.net/wx-%E4%BA%92%E7%9B%B8%E5%85%B3%E6%B3%A8.png")
    no-repeat;
  background-size: 27rpx 32rpx;
  background-position: 15rpx 8rpx;
  line-height: 48rpx;
}
</style>
